<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- <script type="text/javascript" src="iscroll.js"></script> -->
	<!-- 功能弱性能高 -->
	<script type="text/javascript" src="iscroll-probe.js"></script>
	<style type="text/css">
		.wrap{
	width: 300px;height: 300px;background: #ccc;overflow: hidden;margin: 50px;position: relative;
		}
		.content{
	width: 800px;height: 2000px;background: -webkit-linear-gradient(left top,red,green);position:relative;z-index: 2;
		}
		.dropbar{
			position: absolute;top: 0;left: 0;
			z-index: 1;text-align: center;width: 100%;line-height:30px;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="content">
			打开的
		</div>
		<div class="dropbar">
			下拉刷新
		</div>
	</div>
	<script type="text/javascript">
		window.onload=function(){
			let isc=new IScroll('.wrap',{probeType:3});
			let dropb=document.querySelector('.dropbar');
			let contnt=document.querySelector('.content');
	
			let first=0;
			isc.on('scrollStart',function(){
					isc.endTime=0;
					
					isc.on('scroll',fscroll);
			})
			function fscroll(ev){
					first=isc.y;
				if(isc.endTime==0){//还在拖动
					if(isc.y>100){
						dropb.innerHTML='松开手指刷新'
						contnt.style.transform='0.7s all ease';
						contnt.style.top='30px';

					setTimeout(function(){//通过后台数据控制
						dropb.innerHTML='加载完成';
						setTimeout(function(){
							contnt.style.top='0px';
						},1000)
					},2000)

				}else{
						dropb.innerHTML='下拉更多刷新'
					}
				}else{//松手了

					isc.off('scroll',fscroll);
					if(first>100){
						dropb.innerHTML='加载中...';
					}
					
				}
			}
			isc.on('scrollEnd',function(){

			})
		}
	</script>
</body>
</html>